<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>视频直播 - 观众端</title>
    <link rel="icon" type="image/png" th:href="@{/images/a.jpeg}">
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}">
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .layui-container {
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-top: 20px;
        }

        .page-title {
            text-align: center;
            color: #009688;
            font-size: 24px;
            margin-bottom: 30px;
            font-weight: bold;
        }

        .video-container {
            background: #000;
            border-radius: 8px;
            padding: 10px;
            margin-bottom: 20px;
            position: relative;
        }

        .video-header {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            z-index: 10;
            background: rgba(0,0,0,0.5);
            padding: 8px 15px;
            border-radius: 20px;
            display: flex;
            align-items: center;
        }

        .live-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #FF5722;
            border-radius: 50%;
            margin-right: 8px;
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.4; }
            100% { opacity: 1; }
        }

        #remoteVideo {
            width: 100%;
            height: calc(100vh - 300px);
            border-radius: 4px;
            background-color: #2c2c2c;
            object-fit: cover;
        }

        .chat-container {
            height: calc(100vh - 200px);
            display: flex;
            flex-direction: column;
            border: 1px solid #e6e6e6;
            border-radius: 8px;
            margin: 10px;
            background: white;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        }

        .chat-header {
            padding: 10px 15px;
            background: #009688;
            color: white;
            border-radius: 8px 8px 0 0;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .online-count {
            font-size: 12px;
            background: rgba(255,255,255,0.2);
            padding: 4px 8px;
            border-radius: 12px;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
            background: #f9f9f9;
        }

        .chat-message {
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 8px;
            max-width: 85%;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
            word-wrap: break-word;
        }

        .chat-message.sent {
            background: #009688;
            color: white;
            margin-left: auto;
        }

        .chat-message.received {
            background: #f0f0f0;
            margin-right: auto;
        }

        .message-info {
            font-size: 12px;
            margin-bottom: 5px;
        }

        .sent .message-info {
            color: rgba(255,255,255,0.8);
        }

        .received .message-info {
            color: #666;
        }

        .chat-input {
            padding: 15px;
            border-top: 1px solid #eee;
            background: white;
            border-radius: 0 0 8px 8px;
        }

        .chat-input textarea {
            border-radius: 4px;
            margin-bottom: 10px;
            resize: none;
            height: 60px;
            transition: all 0.3s ease;
        }

        .chat-input textarea:focus {
            border-color: #009688;
            box-shadow: 0 0 0 2px rgba(0,150,136,0.2);
        }

        .chat-input button {
            width: 100%;
            border-radius: 20px;
            height: 40px;
            font-size: 14px;
        }

        .control-panel {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
            text-align: center;
        }

        .control-panel button {
            min-width: 120px;
            border-radius: 20px;
        }

        #registerDialog {
            background: white;
            padding: 20px;
            border-radius: 8px;
        }

        #registerDialog .layui-form-label {
            width: 100px;
        }

        #registerDialog .layui-input {
            border-radius: 4px;
        }

        .layui-form-item {
            margin-bottom: 20px;
        }

        /* 响应式布局优化 */
        @media screen and (max-width: 768px) {
            .layui-col-xs9 {
                width: 100%;
            }
            
            .layui-col-xs3 {
                width: 100%;
            }
            
            .chat-container {
                height: 400px;
                margin: 10px 0;
            }

            #remoteVideo {
                height: 300px;
            }
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="page-title">
        <i class="layui-icon layui-icon-video"></i> 直播间
    </div>
    <div class="layui-row">
        <!-- 左侧视频区域 -->
        <div class="layui-col-xs9">
            <div class="video-container">
                <div class="video-header">
                    <span class="live-indicator"></span>
                    <span>直播中</span>
                </div>
                <video id="remoteVideo" autoplay playsinline></video>
            </div>
        </div>
        <!-- 右侧聊天区域 -->
        <div class="layui-col-xs3">
            <div class="chat-container">
                <div class="chat-header">
                    <div>
                        <i class="layui-icon layui-icon-dialogue"></i> 直播间消息
                    </div>
                    <div class="online-count">
                        <i class="layui-icon layui-icon-user"></i> <span id="onlineCount">0</span>
                    </div>
                </div>
                <div class="chat-messages" id="chatMessages"></div>
                <div class="chat-input">
                    <textarea id="messageInput" class="layui-textarea" placeholder="说点什么..."></textarea>
                    <button type="button" class="layui-btn layui-btn-normal" onclick="OPT.sendMessage()">
                        <i class="layui-icon layui-icon-release"></i> 发送
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="control-panel">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-lg" onclick="OPT.register()">
            <i class="layui-icon layui-icon-login-user"></i> 进入直播间
        </button>
    </div>
</div>

<!--注册弹窗-->
<div id="registerDialog" style="display: none;margin-top:10px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-inline">
                <input type="text" name="userId" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">身份：</label>
            <div class="layui-input-block">
                <input type="radio" name="isPub" value="0" title="观众" checked="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">房间号：</label>
            <div class="layui-input-inline">
                <input type="text" name="roomId" placeholder="请输入房间号" class="layui-input">
            </div>
        </div>
    </form>
</div>

<!--jquery-->
<script type="application/javascript" th:src="@{/javascript/jquery-2.1.4.js}"></script>
<!--layui-->
<script type="application/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<!--rtc-->
<script type="application/javascript" th:src="@{/javascript/live/sub/rtc.js}"></script>
<!--sip-->
<script type="application/javascript" th:src="@{/javascript/live/sub/sip.js}"></script>
<!--opt-->
<script type="application/javascript" th:src="@{/javascript/live/sub/opt.js}"></script>

<script>
    /**
     * PeerConnection
     */
    var PeerConnection = window.RTCPeerConnection ||
        window.mozRTCPeerConnection ||
        window.webkitRTCPeerConnection;

    /**
     * 公共STUN
     * @type {{iceServers: [{urls: string}]}}
     */
    var  rtcPcParams = {
        iceServers: [
            {urls: 'stun:stun.l.google.com:19302'}
        ]
    }

    /**
     * 本地peerconnection 对象
     */
    var localRtcPc, localStream = null;

    /**
     * 存放观众的peerconnection
     */
    var RtcPcMaps = new Map();

    // 声明用户ID 、 房间号 ,身份
    var userId, roomId, isPub = null;

    // 存放房间人
    var roomList = [];


    var layer, form = null;

    $(function () {
        Layui.init();
    });

    /**
     * 初始化layui组件
     * @type {{init: Layui.init}}
     */
    var Layui = {
        /**
         * 初始化layui
         */
        init: () => {
            layui.use(['layer', 'form'], function () {
                layer = layui.layer;
                form = layui.form;
            });
        }
    }

    window.onbeforeunload = function () {
        SOCKET.disConnect();
    }

    // 添加回车键发送消息的功能
    document.getElementById('messageInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            OPT.sendMessage();
        }
    });

    // 更新在线人数
    function updateOnlineCount(count) {
        document.getElementById('onlineCount').textContent = count;
    }

    // 监听房间列表变化
    var originalRoomListLength = roomList.length;
    setInterval(() => {
        if (roomList.length !== originalRoomListLength) {
            updateOnlineCount(roomList.length);
            originalRoomListLength = roomList.length;
        }
    }, 1000);
</script>
</html>

